<!DOCTYPE html>
<html>

<head>
	<style>
		body {
			background: url("/img/bg.jpg");
			width: 100%;
		}
	</style>

	<title>个人页面</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/jquery/jquery.min.js"></script>
	<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/reset.css"/>
	<link rel="stylesheet" href="/css/userProfiles.css"/>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
	<script src="/js/plugins/dialog2/dialog.min.js"></script>
	<script src="/js/common.js"></script>

	<script>
        var params = getParams();
        var id = params.id;

        // 取出当前用户
        var myId = JSON.parse(sessionStorage.getItem("user")).id;

        $(function () {

            var strategyPageId = params.id;
            sessionStorage.setItem("strategyPageId", JSON.stringify(strategyPageId));
            if (params.id) {
                //查询作者的个人信息并且渲染到页面上
                $.get("/users/" + params.id, function (data) {
                    $(".bg").css('background-image', 'url("' + data.coverImgUrl + '")');
                    $(".info").renderValues(data);
                });

                $("#letterBtn").click(function () {
                    window.location.href =  "mine/chat.html?userId="+params.id;
                });

            }

            var currentPage = 1;//当前页
            var pages;//总页数
            var travelData = [];
            var commentData = [];

            function query() {
                //获取我的游记列表,某个用户的所有列表
                $.get("/users/" + params.id + "/travels", {currentPage: currentPage}, function (data) {
                    console.log(data);
                    $("#totalTravels").html(data.total);
                    //console.log(data.list.length);
                    $.merge(travelData, data.list);
                    var json = {
                        list: travelData
                    };
                    //回显数据
                    $("#travels").renderValues(json, {
                        getHref: function (item, value) {
                            var url = $(item).data("href");
                            $(item).attr("href", url + value);
                        }
                    });//pageInfo
                    pages = data.pages;
                });

                //获取某个用户的所有评论
                $.get('/users/' + params.id + '/strategyComments', {currentPage: currentPage}, function (data) {
                    $("#totalComments").html(data.total);
                    console.log(data);
                    $.merge(commentData, data.list);
                    console.log(data.list);
                    var json = {
                        list: commentData
                    };
                    $("#comments").renderValues(json, {
                        getHref: function (item, value) {
                            var url = $(item).data("href");
                            $(item).attr("href", url + value);
                        },
                        getStar: function (item, value) {
                            var temp = "";
                            for (var i = 0; i < value; i++) {
                                temp += '<i class="fa fa-star"></i>';
                            }
                            for (var i = 0; i < 5 - value; i++) {
                                temp += '<i class="fa fa-star-o"></i>';
                            }
                            $(item).html(temp);
                        }
                    });
                    pages = data.pages;
                });
                currentPage++;
            }

            query();//默认查询第一页
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 1) {
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });


            $.get("/users",{id:params.id},function (data) {
                $('.bg').css("background-image",'url('+data.coverImgUrl+')');
                $('.info').renderValues(data);
            });

            //判断当前是否是登录用户
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (user){
                //当用户页面是自己查看时
                if(user.id == params.id){
                    $('#letter-follow').css("display","none");
                }else{
                    //查看当前用户是否已经关注
                    $.get("/users/isAttention/"+params.id,function (data) {
                        if (data.result){
                            $('#followBtn').html("已关注");
                        }else {
                            $('#followBtn').html("关注");
                        }
                    })
                }
            }


            //关注用户
            $('#followBtn').click(function () {
                if (user){
                    //关注
                    if($('#followBtn').html()=="关注"){
                        $.ajax({
                            url:"/users/attention/"+params.id,
                            type:"post",
                            success:function (data) {
                                $('#followBtn').html("已关注");
                                $('#fansNum').html(data.result);
                            }
                        })
                    }else {
                        //取消关注
                        $.ajax({
                            url:"/users/disAttention/"+params.id,
                            type:"delete",
                            success:function (data) {
                                $('#followBtn').html("关注");
                                $('#fansNum').html(data.result);
                            }
                        })
                    }

                }else{
                    window.location.href="/login.html";
                }
            });

			// 私信
			$('#letterBtn').click(function () {
                $('#chatId').val(myId);
                $('#chatFriendId').val(id);
                $('#chatForm').submit();
            });
        })
	</script>
</head>
<body>
<!-- 私信 begin -->
<form action="/msg/login" method="post" id="chatForm">
	<input type="text" name="id" id="chatId" style="display: none"/>
	<input type="text" name="friendId" id="chatFriendId" style="display: none"/>
	<input type="submit" value="登录" style="display: none"/>
</form>
<!-- 私信 end -->

<div class="container bg" style="background-image: url(/img/user/bg.jpeg);">
	<a href="javascript:window.history.go(-1)" class="my-arrow">
		<span><i class="fa fa-chevron-left fa-2x"></i></span>
	</a>
	<div class="container">
		<div class="info">
			<img class="rounded-circle" width="17%" render-src="headImgUrl">
			<p class="name" render-html="nickName"></p>
			<p render-html="sign"></p>

			<div class="row num">
				<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
					<div>
						<span >1</span>
					</div>
					<div>
						<span>关注</span>
					</div>
				</div>
				<div class="col-2">
					<div>
						<span render-html="fans" id="fansNum"></span>
					</div>
					<div>
						<span>粉丝</span>
					</div>
				</div>
				<div class="col" id="letter-follow">
					<button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
					<button class="btn btn-success ibtn" id="followBtn">关注</button>
				</div>
			</div>
		</div>
	</div>
</div>


<!--查游记-->
<div class="tabs">
	<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
		<li class="nav-item">
			<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
				TA的游记[<span id="totalTravels"></span>]
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
				TA的点评[<span id="totalComments">1</span>]
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
				TA的旅行单[<span>0</span>]
			</a>
		</li>
	</ul>

	<!--游记数据-->
	<div class="container tab-content" id="pills-tabContent">
		<div class="tab-pane fade show active" id="travels">
			<dl class="list" render-loop="list">
				<dd>
					<a data-href="travelContent.html?id=" render-fun="getHref" render-key="list.id">
						<img render-src="list.coverUrl">
						<p><span class="title" render-html="list.title"></span>
							<span class="span-right">
                                <span>0</span> <i class="fa fa-thumbs-o-up"></i></span>
						</p>
					</a>
					<hr>
				</dd>
			</dl>
		</div>

		<!--评论列表-->
		<div class="comment tab-pane fade " id="comments">
			<div render-loop="list">
				<div class="row">
					<div class="col-2 comment-head">
						<img class="rounded-circle" render-src="list.user.headImgUrl">
					</div>
					<div class="col">
								<span class="comment-star" render-fun="getStar" render-key="list.starNum">

								</span>

						<span class="comment-date" render-html="list.createTime"></span>
						<div class="comment-content">
							<a render-key="list.id" render-fun="getHref" data-href="strategyComment.html?id=">
								<p render-html="list.content"></p>
							</a>
						</div>
						<ul class="comment-img" render-loop="list.imgArr">
							<li>
								<img render-src="list.imgArr.self">
							</li>
						</ul>

						<div class="comment-link">
							<a render-key="list.id" render-fun="getHref" data-href="strategyCatalogs.html?id=">
								<img render-src="list.strategy.coverUrl">
								<span render-html="list.strategy.title"></span>
								<i class="fa fa-angle-right fa-2x"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-pane fade" id="pills-contact">.3333..</div>
	</div>

</div>

</body>
</html>